<template>
  <div class="pos">
    <el-row>
       <el-col :span="7" id="order-list">
          <el-tabs>
            <el-tab-pane label="点餐">
              <el-table :data="tableData">
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="count" label="数量"></el-table-column>
                <el-table-column prop="price" label="金额"></el-table-column>
                <el-table-column label="操作" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delSinglelist(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="totalDiv">
               <small>数量：</small>{{totalCount}} &nbsp;&nbsp;&nbsp;&nbsp;<small>金额：</small>{{totalMoney}}元
              </div>
              <div class="div-btn">
                <el-button type="warning">挂单</el-button> 
                <el-button type="danger" @click="deltotalgoods">删除</el-button> 
                <el-button type="success" @click="checkOut">结账</el-button> 
              </div>
            </el-tab-pane>
            <el-tab-pane label="挂单">挂单</el-tab-pane>
            <el-tab-pane label="外卖">外卖</el-tab-pane>
          </el-tabs>

       </el-col>
       <el-col :span="17">
         <div  class="ofen-foods">
           <div class="title">常用商品</div>
           <div class="ofen-foods-list" >
             <ul>
               <li v-for="goods in oftenGoods" :key="goods.goodsId" @click="addOrderList(goods)">
                 <span>{{goods.goodsName}}</span>
                 <span class="o-price ">￥{{goods.price}}元</span>
               </li>
             </ul>
           </div>

         </div>
         <div class="goodsType">
           <el-tabs>
             <el-tab-pane label="汉堡">
               <ul>
                 <li v-for="goods in type0Goods" :key="goods.goodsId" @click="addOrderList(goods) ">
                 <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                 <span class="foodName">{{goods.goodsName}}</span>
                 <span  class="foodPrice">￥{{goods.price}}元</span>
                 </li></ul>
             </el-tab-pane>
             <el-tab-pane label="小食">
               <ul>
                 <li v-for="goods in type1Goods" :key="goods.goodsId" @click="addOrderList(goods) ">
                 <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                 <span class="foodName">{{goods.goodsName}}</span>
                 <span  class="foodPrice">￥{{goods.price}}元</span>
                 </li></ul>
             </el-tab-pane>
             <el-tab-pane label="饮料" >
               <ul>
                 <li v-for="goods in type2Goods" :key="goods.goodsId" @click="addOrderList(goods) ">
                 <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                 <span class="foodName">{{goods.goodsName}}</span>
                 <span  class="foodPrice">￥{{goods.price}}元</span>
                 </li></ul>
             </el-tab-pane>
             <el-tab-pane label="套餐">
               <ul>
                 <li v-for="goods in type3Goods" :key="goods.goodsId" @click="addOrderList(goods) ">
                 <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                 <span class="foodName">{{goods.goodsName}}</span>
                 <span  class="foodPrice">￥{{goods.price}}元</span>
                 </li></ul>
             </el-tab-pane>
           </el-tabs>
         </div>
         </el-col>   
    </el-row>
     
  </div>
</template>
<script>
import axios from "axios";
export default {
  mounted: function() {
    var orderHeight = document.body.clientHeight;
    document.getElementById("order-list").style.height = orderHeight + "px";
  },
  data() {
    return {
      tableData: [],
      oftenGoods: [],
      type0Goods: [],
      type1Goods: [],
      type2Goods: [],
      type3Goods: [],
      totalMoney: 0,
      totalCount: 0
    };
  },

  created() {
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(response => {
        console.log(response);
        this.oftenGoods = response.data;
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });
    axios
      .get("http://jspang.com/DemoApi/typeGoods.php")
      .then(response => {
        this.type0Goods = response.data[0];
        this.type1Goods = response.data[1];
        this.type2Goods = response.data[2];
        this.type3Goods = response.data[3];
      })
      .catch(error => {
        alert("网络错误，不能访问");
      });
  },
  methods: {
    addOrderList(goods) {
      this.totalMoney=0
      this.totalCount=0
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true;
        }
      }
      if (isHave) {
        var arr = this.tableData.filter(o => o.goodsId == goods.goodsId);
        arr[0].count++;
        console.log(arr);
      } else {
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }
      this.tableData.forEach((element) => {
        this.totalCount += element.count;
        this.totalMoney = this.totalMoney + (element.price * element.count);
      });
    },
    //删除单个商品
    delSinglelist(goods){
      this.tableData=this.tableData.filter(o =>o.goodsId != goods.goodsId)
      // this.tableData[0].count--;
      this.getAllMoney();
    },
    //删除all商品
    deltotalgoods(){
      this.tableData=[]
      this.totalMoney=0;
      this.totalCount=0
    },
    //汇总数量和金额
    getAllMoney(){
      this.totalMoney=0;
      this.totalCount=0;
      if(this.tableData){
        this.tableData.forEach(element=>{
this.totalCount+=element.count
this.totalMoney=this.totalMoney+(element.price*element.count)
        });
      }
    },
    //模拟结账
    checkOut(){
      if(this.totalCount!=0){
        this.totalMoney=0;
      this.totalCount=0;
       this.tableData=[];
       this.$message({
         message:'结账成功',
        type:'success'
       })
      }else{
        this.$message.error('不能空结')
      }
    }
  }

};
</script>
<style slot-scope="scope">
.div-btn {
  margin-top: 10px;
}
.el-tabs__nav {
  width: 100%;
}
/* .el-tabs__item{
  width:33.33%
} */
.title {
  padding: 10px;
  background-color: #f9fafc;
  text-align: left;
  height: 20px;
  border-bottom: 1px solid #d3dce6;
}
.ofen-foods-list ul li {
  list-style: none;
  float: left;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}
#order-list {
  border-right: 1px solid rgb(54, 178, 235);
}
.o-price {
  color: #58b7ff;
}
.goodsType {
  clear: both;
}
.goodsType ul li {
  width: 23%;
  float: left;
  padding: 2px;
  margin: 2px;
  border: 1px solid #e5e9f2;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
}
.goodsType span {
  display: block;
  float: left;
}

.foodImg {
  width: 40%;
}
.foodName {
  font-size: 16px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
}
.totalDiv {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #d3dce6;
}
</style>
